iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
0
Mobile Development

Android開發系列 第 15

[Day15]簡單的GridLayout

  • 分享至 

  • xImage
  •  

哈囉大家好今天會來示範GridLayout,他和前一天介紹的TableLayout有些類似,不過他有些地方和TableLayout不同,廢話不多說那我們就開始今天的示範吧!

在貼程式碼之前,我先來介紹一下大概會用到的程式碼:

  • columnCount 用來設定GridLayout的列(Column)有幾個
  • rowCount 用來設定GridLayout的行(row)的數量有多少
  • layout_row 用來指定該元件在第幾行,通常由0開始計算
  • layout_column 用來指定該元件在第幾列,通常由0開始計算
  • layout_columnSpan 用來使該元件合併幾列
  • layout_rowSpan 用來使該元件合併幾行

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="5"
    android:orientation="horizontal"
    android:rowCount="8">

    <Button
        android:text="btn1"
        android:layout_row="0"
        android:layout_column="0"
        />

    <Button
        android:text="btn2"
        android:layout_row="0"
        android:layout_column="1"
        />

    <Button
        android:text="btn3"
        android:layout_row="0"
        android:layout_column="2"
        />

    <Button
        android:text="btn4"
        android:layout_row="0"
        android:layout_column="3"
        />

    <Button
        android:text="btn5"
        android:layout_row="0"
        android:layout_column="4"
        />

    <Button
        android:text="btn6"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        />

    <Button
        android:text="btn7"
        android:layout_row="1"
        android:layout_column="2"
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        />

    <Button
        android:text="btn8"
        android:layout_row="2"
        android:layout_column="0"
        android:layout_gravity="fill"
        />

    <Button
        android:text="btn9"
        android:layout_column="1"
        android:layout_row="2"
        android:layout_columnSpan="2"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"
        />

    <Button
        android:text="btn10"
        android:layout_column="3"
        android:layout_row="2"
        android:layout_columnSpan="2"
        android:layout_rowSpan="3"
        android:layout_gravity="fill"
        />

    <Button
        android:text="btn11"
        android:layout_row="3"
        android:layout_column="0"
        android:layout_gravity="fill"
        />

    <Button
        android:text="btn12"
        android:layout_row="4"
        android:layout_column="0"
        android:layout_columnSpan="3"
        android:layout_gravity="fill"/>

   <Button
       android:text="btn13"
       android:layout_row="5"
       android:layout_column="3"
       android:layout_columnSpan="2"
       android:layout_gravity="fill"
        />

    <Button
        android:text="btn14"
        android:layout_row="6"
        android:layout_columnSpan="5"
        android:layout_gravity="fill"
        />

</GridLayout>

在程式碼裡為了方便計算元件在第幾行第幾列我將每一個按鈕都設定了layout_row和layout_column,然後讀者如果有跟著上面的程式碼一起做的話會發現在第6行的第1到第3列有空白,不是我忘記指定元件而是我故意而為的,相信大家在練習完後會對於GridLayout有基本的認識了,那今天的示範就到此為止了,謝謝大家耐心地觀看。


上一篇
[Day14] 簡單的TableLayout
下一篇
[Day16]簡單的ListView
系列文
Android開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言